<template>
  <div class="container drag">
    <template v-if="type === 'audio'">
      <div class="background">
        <div style="display: flex;flex-direction: column;align-items: center">
          <avatar :src="userInfo.avatar" width="95px" height="95px"></avatar>
          <span style="margin: 10px 0 ;">{{userInfo.nickname}}</span>
          <span style="font-size: 12px">{{tipsTitle}}</span>
        </div>
      </div>
      <ul class="audio-operate-container no-drag">
        <li  @click="toggleStatus('mac')">
          <div class="icon-container"
               :style="{
                color: activityInfo.mac ? 'black' : 'white',
                backgroundColor: activityInfo.mac ? 'white' : 'black',
              }"
          >
            <el-icon><ElemeFilled /></el-icon>
          </div>
          <span>麦克风已开</span>
        </li>
        <li @click="close">
          <div class="icon-container" style="color: white;background-color: red;">
            <el-icon><ChromeFilled /></el-icon>
          </div>
          <span>取消</span>
        </li>
        <li @click="toggleStatus('speaker')">
          <div class="icon-container"
               :style="{
                color: activityInfo.speaker ? 'black' : 'white',
                backgroundColor: activityInfo.speaker ? 'white' : 'black',
              }"
          >
            <el-icon><Shop /></el-icon>
          </div>

          <span>扬声器已开</span>
        </li>

      </ul>
    </template>

  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useSystemStore } from '@/stores/system'
import { searchUser } from '@/api/user'
import { onBeforeMount, ref } from 'vue'
import avatar from  '@/components/img/index.vue'
import { ChromeFilled, ElemeFilled, Shop } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const systemStore = useSystemStore()
systemStore.showLoading = true
const {uId , sessionId , type , status} = route.params
const userInfo = ref({})
const tipsTitle = ref('等待对方接收邀请...')

const activityInfo = ref({
  mac: true,
  speaker: true
})


onBeforeMount(() => {
  getUser()
})


// 获取用户详情
const getUser = async () => {
   const res = await searchUser(uId);
  userInfo.value = res.data
  console.log(res.data)
  systemStore.showLoading = false
}

// 切换按钮状态
const toggleStatus = (type) => {
  activityInfo.value[type] = !activityInfo.value[type]
  switch (type) {
    case 'mac':
      break;
    case 'speaker': break;

  }
}

// 关闭
const close = () => {
  const obj = {
    sessionId: sessionId,
    targetUserId: uId,
  }
  window.ipcRenderer.send('stopCall' , obj)
}

</script>


<style scoped lang="less">
.container {
  color: white;
  background-color: rgb(86, 86, 86);
  display: flex;
  flex-direction: column;

  .background {
    flex: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .audio-operate-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 40px 15%;
    font-size: 12px;

    li {

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;

    }
  }

  .icon-container {
    background-color: rgb(58, 58, 58);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    margin-bottom: 10px;
  }

}
</style>
